<template>
    <div class="wl-flow-page">
        <div class="flow-table">
            <vxe-toolbar>
                <template v-slot:buttons>
                    <Button type="primary" class="flow-table-btn-action" icon="fa fa-plus"
                            :disabled="!btnShow" @click="insertEvent()">新增
                    </Button>
                            <Tooltip :content="tip" placement="right" theme="light" max-width="700" :transfer="true">
                                <Icon type="md-help-circle" class="excel-help"/>
                            </Tooltip>
                    <!--                    <Button type="info" class="flow-table-btn-action" icon="fa fa-plus" @click="flowAction(1)">新增</Button>-->
                </template>
            </vxe-toolbar>
            <option-modal-setting ref="optionModal"
                                  :baseInfoId="baseInfoId" :modal-title="modalTitle" :modal-show="modalShow"
                                  :modal-type="modalType"
                                  :dataObj="modalData" @cancelOption="cancelOption"
                                  @saveOption="selectSstGovFlowList"></option-modal-setting>
            <vxe-table
                    border
                    resizable
                    align="center"
                    ref="xTable"
                    class="my_table_insert"
                    max-height="400"
                    :data="tableData">
                <vxe-table-column type="checkbox" width="60"></vxe-table-column>
                <vxe-table-column type="seq" width="60"></vxe-table-column>
                <vxe-table-column field="node_title" min-width="300" title="节点名称"></vxe-table-column>
                <vxe-table-column field="node_ren_wu" min-width="150" title="节点任务"></vxe-table-column>
                <vxe-table-column field="node_yi_ju" min-width="150" title="节点依据"></vxe-table-column>
                <vxe-table-column field="node_warning" min-width="150" title="节点风险"></vxe-table-column>
                <vxe-table-column field="node_flow" min-width="150" title="节点流转"></vxe-table-column>
                <vxe-table-column field="node_xie_tong" min-width="150" title="节点协同"></vxe-table-column>
                <vxe-table-column width="80" field="sort" min-width="150" title="调整排序"></vxe-table-column>
                <vxe-table-column title="操作" width="150" fixed="right" show-overflow>
                    <template v-slot="{ row }">
                        <Button type="info" size="small" @click="editEvent(row)">编辑</Button>
                        <Button type="error" class="del" size="small" @click="removeEvent(row)">删除</Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>
        <form-data :show='formDataShow' @cancelShow="cancelShow"></form-data>
    </div>
</template>

<script>
import FormData from './components/form-data/index'
import {
  selectSstGovFlowList,
  deleteSstGovFlow
} from '@/api/setting/flow-setting.js'
import OptionModalSetting from './components/option-modal-setting/index'

export default {
  name: 'FlowSetting',
  components: { OptionModalSetting, FormData },
  data () {
    return {
      tableData: [],
      formDataShow: false,
      modalTitle: '',
      modalShow: false,
      modalType: '',
      modalData: {
        sort: 1
      },
      tip: '请将节点名称细化到最小单元,\n' +
          '例如：\n' +
          '1.房产单位提交出租单位申请\n' +
          '2.局办公室经办人受理房产出租单位《办公用房出租申请》\n' +
          '3.局办公室主任受理房产出租单位《办公用房出租申请》\n' +
          '4.局办公室主管领导按照业务处室管理范围分解房产出租审批任务\n' +
          '5.办公用房管理处经办人或资产管理处经办人审核房产出租单位《办公用房出租申请》附件1：《房产出租单位概况及房产使用情况》\n' +
          '6.办公用房管理处经办人或资产管理处经办人审核房产出租单位《办公用房出租申请》附件2：《权属证明》\n' +
          '  ...\n' +
          '7.办公用房管理处负责人或资产管理处负责人审核房产出租单位申报材料 附件1：《房产出租单位概况及房产使用情况》\n' +
          '8.办公用房管理处负责人或资产管理处负责人审核房产出租单位申报材料 附件2：《权属证明》\n' +
          '  ...\n' +
          '9.办公用房管理处或资产管理处形成审核意见\n' +
          '10.办公用房管理处或资产管理处报主管领导审批\n' +
          '11.局主要领导审批\n' +
          '12.办公用房管理处或资产管理处向房产出租单位下达审批意见 、审批表\n' +
          '13.房产出租单位依审批正式招租\n' +
          '14.房产出租单位上报出租房产公开招租竞价通知书或协议招租说明\n' +
          '15.房产出租单位上报签订的合同文本（制式电子合同文本）\n' +
          '16.机关事务管理局认定是否适合公开（协议招租说明时需要）\n' +
          '17.房产出租单位提交房产出租公示信息\n' +
          '18.房产出租单位上报租金凭证\n' +
          '19.房产出租单位档案资料归档\n' +
          '20.机关事务管理局资料归档\n' +
          '21.机关事务管理局 房屋状态调整'
    }
  },
  props: {
    baseInfoId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  computed: {
    btnShow () {
      if (this.baseInfoId !== '') {
        return this.baseInfoId
      } else {
        return false
      }
    }
  },
  methods: {
    cancelOption () {
      this.modalShow = false
    },
    flowAction (type) {
      if (type === 1) {
        this.formDataShow = true
      }
    },
    cancelShow () {
      this.formDataShow = false
    },
    insertEvent () {
      this.modalTitle = '添加'
      this.modalType = 'add'
      this.modalData = { sort: 1 }
      this.modalShow = true
    },
    editEvent (val) {
      this.modalTitle = '编辑'
      this.modalType = 'edit'
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    getInsertEvent () {
      let insertRecords = this.$refs.xTable.getInsertRecords()
      this.$XModal.alert(insertRecords.length)
    },
    getSelectionEvent () {
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      this.$XModal.alert(selectRecords.length)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    selectSstGovFlowList () {
      this.modalShow = false
      if (this.baseInfoId !== '') {
        selectSstGovFlowList({ gov_base_id: this.baseInfoId }).then(ret => {
          let data = ret.data
          if (data.errcode === 0) {
            this.tableData = data.data
            // console.log('表格', this.tableData)
            this.$emit('flowNodeData', data.data)
          } else {
            this.error(data)
          }
        })
      }
    },
    removeEvent (val) {
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    deleteOne (val) {
      // let delData= [val]
      deleteSstGovFlow({ listAll: [val] }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.success()
          this.selectSstGovFlowList()
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    }
  },
  mounted () {
    this.selectSstGovFlowList()
  },
  watch: {
    baseInfoId (data) {
      this.selectSstGovFlowList()
    }
  }
}
</script>

<style scoped lang="less">
    .del {
        margin-left: 10px;
    }

    .wl-flow-page {
        .flow-table {
            &-btn-action {
                margin-right: 10px;
            }

            &-btn-row {
                margin-bottom: 10px;
            }
        }

    }

    /deep/ .ivu-btn > .ivu-icon + span, .ivu-btn > span + .ivu-icon {
        margin-left: 0px;
    }
 /*   /deep/ .vxe-table--body-wrapper, .vxe-table--fixed-left-body-wrapper, .vxe-table--fixed-right-body-wrapper{
        overflow-x:hidden;
    }*/
    .excel-help {
        display: inline-block;
        font-size: 16px;
        color: orange;
        cursor: pointer;
    }
</style>
